openlayers加载geojson数据 * |
您所在的位置：网站首页 › openlayers geojson › openlayers加载geojson数据 * |
|
获取GeoJSON数据，可以通过http请求获取，也可以自己定义json数据。很多小伙伴json是经纬度的坐标，不用急，往下看 注意格式
var geojsonObject = {
'type': 'FeatureCollection',
'crs': {
'type': 'name',
'properties': {
'name': 'EPSG:3857'
}
},
'features': [{
'type': 'Feature',
'geometry': {
'type': 'Point',
'coordinates': [0, 0]
}
}, {
'type': 'Feature',
'geometry': {
'type': 'LineString',
'coordinates': [[4e6, -2e6], [8e6, 2e6]]
}
}, {
'type': 'Feature',
'geometry': {
'type': 'LineString',
'coordinates': [[4e6, 2e6], [8e6, -2e6]]
}
}, {
'type': 'Feature',
'geometry': {
'type': 'Polygon',
'coordinates': [[[-5e6, -1e6], [-4e6, 1e6], [-3e6, -1e6]]]
}
}, {
'type': 'Feature',
'geometry': {
'type': 'MultiLineString',
'coordinates': [
[[-1e6, -7.5e5], [-1e6, 7.5e5]],
[[1e6, -7.5e5], [1e6, 7.5e5]],
[[-7.5e5, -1e6], [7.5e5, -1e6]],
[[-7.5e5, 1e6], [7.5e5, 1e6]]
]
}
}, {
'type': 'Feature',
'geometry': {
'type': 'MultiPolygon',
'coordinates': [
[[[-5e6, 6e6], [-5e6, 8e6], [-3e6, 8e6], [-3e6, 6e6]]],
[[[-2e6, 6e6], [-2e6, 8e6], [0, 8e6], [0, 6e6]]],
[[[1e6, 6e6], [1e6, 8e6], [3e6, 8e6], [3e6, 6e6]]]
]
}
}, {
'type': 'Feature',
'geometry': {
'type': 'GeometryCollection',
'geometries': [{
'type': 'LineString',
'coordinates': [[-5e6, -5e6], [0, -5e6]]
}, {
'type': 'Point',
'coordinates': [4e6, -5e6]
}, {
'type': 'Polygon',
'coordinates': [[[1e6, -6e6], [2e6, -4e6], [3e6, -6e6]]]
}]
}
}]
};
创建矢量图层Source var vectorSource = new ol.source.Vector({
features: (new ol.format.GeoJSON()).readFeatures(geojsonObject)
}); 很多小伙伴的json文件是经纬度的，但是map初始化的时候默认是3857的投影，这就对不上了，加载不显示，如下的geojson文件，坐标是经纬度的4326 {
"type": "FeatureCollection",
"name": "R1Z",
"crs": {
"type": "name",
"properties": {
"name": "EPSG:4326"
}
},
"features": [
{
"type": "Feature",
"properties": {
"OBJECTID": 1,
"EntityHand": 5295,
"UserID": 0,
"alt": 45,
"Shape_Leng": 0.0056963466905999996
},
"geometry": {
"type": "LineString",
"coordinates": [
[
116.4093,
39.47819
],
[
116.4069,
39.4730
]
]
}
}
]
}
如果geojson不显示，那多半是投影的问题，可以自己设定下投影 转换，使用{featureProjection: 'EPSG:3857'}将json转成3857的投影进行读取 var source=new ol.source.Vector({ features: (new ol.format.GeoJSON({featureProjection: 'EPSG:3857'})).readFeatures(geojsonObject) });
3.创建图层并绑定Source，给个显眼的样式 var vectorLayer = new ol.layer.Vector({ source: vectorSource, style: new ol.style.Style({ stroke: new ol.style.Stroke({ color: 'red', width: 5, }), }) });4.添加到map中即可，此时的map投影是3857，如果在view设置了投影为4326可用直接显示出来经纬度的，贴出完整代码： $.getJSON("./R1Z.geojson", function (data, textStatus, jqXHR) { debugger let geojsonObject = data let features = (new ol.format.GeoJSON({ featureProjection: 'EPSG:3857' })).readFeatures(geojsonObject) let p = (new ol.format.GeoJSON()).readProjection(geojsonObject) var vectorSource = new ol.source.Vector({ // projection: 'EPSG:3857', features: features }); //矢量图层 lineLayer = new ol.layer.Vector({ zIndex: 99, source: vectorSource, // style: styleFunction style: new ol.style.Style({ stroke: new ol.style.Stroke({ color: 'red', width: 5, }), }) }); map.addLayer(lineLayer); //添加上站点的图层 } );
|
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |